<template>
  <div> 
    <el-container>
     <!-- mode="horizontal" 水平导航 -->
      <el-header>
        <el-menu mode="horizontal" default-active="2">
          <el-menu-item index="1">
            <i class="el-icon-s-management"></i>
            驾校列表</el-menu-item>
          <el-menu-item index="2">
             <i class="el-icon-user-solid"></i>
            全用户列表</el-menu-item>
          <el-submenu index="3">
            <span slot="title">
              <i class="el-icon-s-check"></i>
              考题</span>
            <el-menu-item>科一</el-menu-item>
            <el-menu-item>科二</el-menu-item>
            <el-menu-item>科三</el-menu-item>
            <el-menu-item>科四</el-menu-item>
          </el-submenu>
          <el-menu-item index="4">
            <i class="el-icon-s-grid"></i>
            社区</el-menu-item>
        </el-menu>
      </el-header>
      <el-container class="container">
        <!-- class="elmenu" 垂直导航 -->
        <el-aside style="margin-top:1px" width="180px">
          <!-- 加router必要的 点击自动跳转 -->
          <el-menu router mode="vertical" :default-active="defaultIndex">
                <!--  index后边加上跳转路径 -->
            <el-menu-item index="container">
              <i class="el-icon-s-custom"></i>
              教练列表</el-menu-item>
              <!--  index后边加上跳转路径 -->
            <el-menu-item index="icon">
              <i class="el-icon-s-custom"></i>
              收藏管理</el-menu-item>
              <!--  index后边加上跳转路径 -->
            <el-submenu index="button">
              <span slot="title">
                <i class="el-icon-s-custom"></i>
                类型分类</span>
                <!--  index后边加上跳转路径 -->
              <el-menu-item index="button">
                <i class="el-icon-s-custom"></i>
                小车</el-menu-item>
              <el-menu-item index="Baok">
                <i class="el-icon-s-custom"></i>
                货车</el-menu-item>
              <el-menu-item>
                <i class="el-icon-s-custom"></i>
                客车</el-menu-item>
              <el-menu-item>
                <i class="el-icon-s-custom"></i>
                摩托车</el-menu-item>
            </el-submenu>
            <!--  index后边加上跳转路径 -->
            <el-menu-item index="lanqing">
              <i class="el-icon-s-custom"></i>
              订单管理</el-menu-item>
          </el-menu>
        </el-aside>
        <el-main class="test-5">全用户列表：
          <client></client>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
    //引入底部导航组件
    import Client from '../components/Client.vue'
export default{
  components:{
    Client,  //注册底部导航组件
  },
  data(){
    return{
      //截取网页地址
      defaultIndex:location.href.substring(location.href.lastIndexOf('/')+1)
    }
  },
}
</script>

<style scoped>
  .elmenu{border-radius: none;}
  .el-menu.el-menu--horizontal {
    background-color: #208eff85;
    border-bottom: solid 1px #409eff;
    color: blue;
}
  .container{
    position: fixed;
    top: 70px;
    right: 10px;
    bottom: 10px;
    left: 10px;
  }
    .test-5::-webkit-scrollbar {
  /*滚动条整体样式*/
  width : 10px;  /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
  }
  .test-5::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius   : 10px;
  background-color: skyblue;
  background-image: -webkit-linear-gradient(
      45deg,
      rgba(255, 255, 255, 0.2) 25%,
      transparent 25%,
      transparent 50%,
      rgba(255, 255, 255, 0.2) 50%,
      rgba(255, 255, 255, 0.2) 75%,
      transparent 75%,
      transparent
  );
  }
  .test-5::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
  background   : #ededed;
  border-radius: 10px;
  }

</style>